<!--
 * @Author: wcx 1055127249@qq.com
 * @Date: 2024-12-30 14:16:51
 * @LastEditors: wcx 1055127249@qq.com
 * @LastEditTime: 2025-01-06 10:25:53
 * @FilePath: \my-project\src\views\CreateListBiz\apiList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-table :data="list" border>
    <el-table-column prop="name" label="接口名">
      <template slot-scope="scope">
        <el-input v-if="scope.$index > 3" v-model="scope.row.name"></el-input>
        <template v-else>{{scope.row.name}}</template>
      </template>
    </el-table-column>
    <el-table-column prop="desc" label="接口描述">
      <template slot-scope="scope">
        <el-input v-if="scope.$index > 3" v-model="scope.row.desc"></el-input>
        <template v-else>{{scope.row.desc}}</template>
      </template>
    </el-table-column>
    <el-table-column prop="method" label="请求类型">
      <template slot-scope="scope">
        <el-select v-model="scope.row.method" placeholder="请选择" style="width: 100%;">
          <el-option label="POST" value="post"></el-option>
          <el-option label="GET" value="get"></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column prop="url" label="接口地址">
      <template slot-scope="scope">
        <el-input v-model="scope.row.url" clearable></el-input>
      </template>
    </el-table-column>
    <el-table-column>
      <template slot-scope="scope">
        <el-button v-if="scope.$index > 3" type="danger" size="mini" @click="handleDelete(scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data () {
    return {
      list: [
        { name: 'query', desc: '分页列表接口', method: 'get', url: '/api/user/list' },
        { name: 'insert', desc: '新增接口', method: 'post', url: '/api/user/insert' },
        { name: 'update', desc: '修改接口', method: 'post', url: '/api/user/update' },
        { name: 'delete', desc: '删除接口', method: 'post', url: '/api/user/delete' },
      ]
    }
  },
  methods:{
    setData(data){
      this.list = data
    },
    handleClick(){
      this.list.push({})
    },
    handleDelete(index) {
      this.list.splice(index, 1)
    }
  }
}
</script>